{% extends "base.html" %}

{% block stylesheets %}
<style>

th.chalname {
    height: 80px;
    width: 40px;
    min-width: 40px;
    max-width: 40px;
    vertical-align: bottom;
    padding: 0;
    font-size: 12px;
    line-height: 0.8;
}
.chalname > div{
    position: relative;
    top: 0px;
    left: 30px;
    height: 100%;
    overflow: hidden;
    /* TODO border */
    -webkit-transform: skew(-45deg,0deg);
    transform: skew(-45deg,0deg);
}
.chalname span{
    display: inline-block;
    position: absolute;
    bottom: 30px;
    left: -30px;
    text-align: left;
    width:85px;
    -webkit-transform: skew(45deg,0deg) rotate(315deg);
    transform: skew(45deg,0deg) rotate(315deg);
}
.chalmark {
    font-size:20px;
}
.matrix {
    overflow-x: scroll;
    cursor: grab;
    cursor : -o-grab;
    cursor : -moz-grab;
    cursor : -webkit-grab;
}

</style>
{% endblock %}


{% block content %}
<div class="jumbotron home">
    <div class="container">
        <h1>Scoreboard</h1>
    </div>
</div>
<div class="container main-container">
    {% if errors %}
    <div class="container main-container">
        <div id='errors' class="row">
    {% for error in errors %}
            <h1>{{ error }}</h1>
    {% endfor %}
        </div>
    </div>
    {% else %}

        {% if score_frozen %}
        <div class="container main-container">
            <div class="row">
                <h1>Scoreboard has been frozen.</h1>
            </div>
        </div>
        {% endif %}

    <div class="matrix dragscroll">
    <table id="scoreboard" class="table table-striped">
        <thead>
            <tr>
                <th width="5%" class="text-center"><b>#</b>
                </th>
                <th width="10%"><b>Team</b>
                </th>
                <th width="10%"><b>Score</b>
                </th>
                {% for chal in challenges %}
                    <div><th class="chalname" title="{{ chal.category }}">
                        <div><span>{{ chal.name }}</span></div>
                    </th></div>
                {% endfor %}
            </tr>
        </thead>
        <tbody>
        {% for team in standings %}
            <tr>
                <td>{{ loop.index }}</td>
                <td><a href="{{ request.script_root }}/{{ mode }}/{{ team.teamid }}">{{ team.name }}</a></td>
                <td>{{ team.score }}</td>
                {% for chal in challenges %}
                    <td class="chalmark">
                    {% if chal.id in team.solves %}
                    ✔
                    {% else %}

                    {% endif %}
                    </td>
                {% endfor %}
               </tr>
        {% endfor %}
        </tbody>
    </table>
    </div>
    {% endif %}
</div>
{% endblock %}

{% block scripts %}
    <script>var challenges = {{ challenges | tojson }};</script>
    <script src="{{ request.script_root }}/themes/{{ theme }}/static/js/utils.js"></script>
    <script src="{{ request.script_root }}/matrix/static/dragscroll.js"></script>
    <script src="{{ request.script_root }}/matrix/static/scoreboard-matrix.js"></script>
{% endblock %}